﻿<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="keyword" content=""/>
<meta name="decoration" content=""/>
<title>百度二级导航</title>
<style>
	*{
		margin:0;
		padding:0;
}
.box{
	width:620px;
	height:30px;
	margin:50px auto;
}
.box ul li{
	list-style:none;
	float:left;
	width:100px;
	height:30px;
	text-align:center;
	line-height:30px;
	boder:1px solid red;
	cursor:pointer;
}
.box ul li a{
	width:100%;
	height:30px;
	background:red;
	display:block;
	text-decoration:none;
	color:#ff9;
}
.box ul li ul li{
	font-size:12px;
	color:#333;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li>新闻</li>
<li>视频</li>
<li>地图</li>
<li>贴吧</li>
<li>登录</li>
<li id="li"><a href="javascript:;">设置</a>
<ul id="list" style="display:none;">
<li>高级搜素</li>
<li>历史搜索</li>
<li>关闭预测</li>
<li>搜索历史</li>
</ul>
</li>
</ul>
</div>
<script>
var li=document.getElementById("li");
var list=document.getElementById("list");
li.onmouseover=function(){
list.style.display="block";
}
li.onmouseout=function(){
list.style.display="none";
}
</script>
</body>
</html>